<template>
        <div class="view-container">
                <!--面包屑 -->
                <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>后台设置</el-breadcrumb-item>
                        <el-breadcrumb-item>菜单</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 生成代码列表展示 -->
                <span>生成代码列表</span>
                <el-tree :data="dataSource" show-checkbox :props="defaultProps" :expand-on-click-node="false">
                        <template #default="{ node, data }">
                                <span class="custom-tree-node">
                                        <span>{{ node.label }}| <span style="color: red;">{{ data.makecode_user }}</span> |<span style="color: skyblue;">{{ data.makecode_type }}</span></span>
                                        <span>
                                                <span @click="Delete(data)">删除</span>
                                        </span>
                                </span>
                        </template>
                </el-tree>
        </div>
</template>
<script setup lang="ts">
import { getMakeCodeList, DeleteBlock } from '../service/MakeCode.js'
import { ref, reactive, onMounted } from 'vue'


const makecode_list = ref([])

onMounted(() => {
        getMakeCodeList().then((res:any) => {
                makecode_list.value = res.data
        })
})

const dataSource = makecode_list
const defaultProps = {
        children: 'children',
        label: 'makecode_name',
        disabled: 'disabled',
}

//*删除代码
function Delete(data:any) {
        if(data.makecode_type == "前端")
        {
        const content = {name:data.makecode_name,url:data.makecode_url,type:2,}
        DeleteBlock(content)

        }
        else if(data.makecode_type == "前台")
        {
        const content = {name:data.makecode_name,url:data.makecode_url,type:1,}   
        DeleteBlock(content)
        }
}
</script>
<style>
.custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 80px;
}
</style>